.age-calculator-container { --primary-color: #667eea; --secondary-color: #764ba2; --text-color: #2d3748; max-width: 500px; margin: 2rem auto; padding: 20px; } .age-calculator { background: rgba(255, 255, 255, 0.95); padding: 2rem; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif; } .age-calculator h1 { color: var(--text-color); text-align: center; margin-bottom: 1.5rem; font-size: 1.8rem; } .age-calculator .input-group { margin-bottom: 1.5rem; } .age-calculator label { display: block; margin-bottom: 0.5rem; color: var(--text-color); font-weight: 600; } .age-calculator input[type="date"] { width: 100%; padding: 0.8rem; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 1rem; } .age-calculator button { width: 100%; padding: 1rem; background: var(--primary-color); color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background 0.3s ease; } .age-calculator button:hover { background: var(--secondary-color); } .age-calculator .result { margin-top: 1.5rem; padding: 1rem; background: #f7fafc; border-radius: 8px; text-align: center; display: none; } @media (max-width: 480px) { .age-calculator-container { padding: 10px; } .age-calculator { padding: 1.5rem; } } 📅 Age Calculator Your Birthdate Calculate Age (function() { // Scoped JavaScript to prevent conflicts document.getElementById('age-calc-birthdate').max = new Date().toISOString().split('T')[0]; window.calculateAge = function() { const birthdate = new Date(document.getElementById('age-calc-birthdate').value); const today = new Date(); let years = today.getFullYear() - birthdate.getFullYear(); let months = today.getMonth() - birthdate.getMonth(); let days = today.getDate() - birthdate.getDate(); if (days < 0) { months--; days += new Date(today.getFullYear(), today.getMonth(), 0).getDate(); } if (months < 0) { years--; months += 12; } const resultDiv = document.getElementById('age-calc-result'); document.getElementById('age-calc-years').textContent = `Years: ${years}`; document.getElementById('age-calc-months').textContent = `Months: ${months}`; document.getElementById('age-calc-days').textContent = `Days: ${days}`; resultDiv.style.display = 'block'; } })();
